<template>
  <div>
    <van-nav-bar
      title="市集"
      left-text="返回首页"
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- 商品列表 -->
    <p>
      <van-card
        num="1"
        price="88.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #tags>
          <van-tag plain type="danger">标签</van-tag>
          <van-tag plain type="danger">标签</van-tag>
        </template>
        <template #footer>
          <van-button size="mini">不感兴趣</van-button>
          <van-button size="mini">加入购物车</van-button>
        </template>
      </van-card>

      <van-card
        num="1"
        price="88.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #tags>
          <van-tag plain type="danger">标签</van-tag>
          <van-tag plain type="danger">标签</van-tag>
        </template>
        <template #footer>
          <van-button size="mini">不感兴趣</van-button>
          <van-button size="mini">加入购物车</van-button>
        </template>
      </van-card>

      <van-card
        num="1"
        price="88.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #tags>
          <van-tag plain type="danger">标签</van-tag>
          <van-tag plain type="danger">标签</van-tag>
        </template>
        <template #footer>
          <van-button size="mini">不感兴趣</van-button>
          <van-button size="mini">加入购物车</van-button>
        </template>
      </van-card>

      <van-card
        num="1"
        price="88.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #tags>
          <van-tag plain type="danger">标签</van-tag>
          <van-tag plain type="danger">标签</van-tag>
        </template>
        <template #footer>
          <van-button size="mini">不感兴趣</van-button>
          <van-button size="mini">加入购物车</van-button>
        </template>
      </van-card>

      <van-card
        num="1"
        price="88.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #tags>
          <van-tag plain type="danger">标签</van-tag>
          <van-tag plain type="danger">标签</van-tag>
        </template>
        <template #footer>
          <van-button size="mini">不感兴趣</van-button>
          <van-button size="mini">加入购物车</van-button>
        </template>
      </van-card>
    </p>

    <!-- 商品底部购物车 -->

    <p>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          @click="onClickIcon"
        />
        <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="onClickButton"
        />
        <van-goods-action-button type="danger" text="立即结算" />
      </van-goods-action>
    </p>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  methods: {
    onClickIcon() {
      Toast("点击图标");
    },
    onClickButton() {
      Toast("点击按钮");
    },
    onClickLeft() {
      // Toast("返回");
      this.$router.push("/Home");
    }
  }
};
</script>

<style></style>
